<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023/2/6
  Time: 16:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>客户贡献分析</title>
    <jsp:include page="../common/css_js.jsp"/>
    <jsp:include page="../common/table.jsp"/>
</head>
<body>
<div class="container col-lg-12 ">
    <div class="card">
        <header class="card-header">
            <div class="card-title"><b style="font-size: 25px">客戶贡献分析</b></div>
        </header>
        <div class="card-body">
            <form class="form-inline" name="form1" action="#" method="post">
                &nbsp;&nbsp;<b>客户名称：</b>
                <label>
                    <input name='name' placeholder='请输入要查询的客户名称' class='form-control'/>
                </label>&nbsp;
                <b>金额：</b>
                <label><input name="priceMin" style="width: 90px" class="form-control"
                              placeholder="最低价格"></label>
                &nbsp;—&nbsp;
                <label><input name="price" style="width: 90px" class="form-control" placeholder="最高价格"></label>
                &nbsp;
                <b>下单时间：</b>
                <label>
                    <input class="form-control" style="width: 130px" type="text" data-provide="datepicker" name="date"
                           placeholder="请输入下单时间" data-today-highlight="true" data-autoclose="false"/>
                </label>&nbsp;
                <button type="button" class="btn btn-primary" onclick="like()"><span
                        class="mdi mdi-table-search"></span>搜索
                </button>
            </form>
            <div id="toolbar">
                &nbsp;&nbsp;<a class="btn btn-primary" href="#" onclick="query()"><span
                    class="mdi mdi-table-large"></span>显示所有</a>
            </div>
            <div class="table-responsive">
                <table id="table"></table>
            </div>
        </div>
    </div>
</div>
<style>
    .ta {
        margin-top: 50px;
    }
</style>
<script type="text/javascript">
    $(function () {
        // 初始化表格
        $('#table').bootstrapTable({
            classes: 'table table-bordered table-hover table-striped',
            url: '${ctx}/order-detail/contribution',
            method: 'GET',
            toolbar: '#toolbar', // 工具按钮容器
            pagination: true,
            pageNumber: 1,
            pageSize: 5,
            paginationLoop: false,
            pageList: [5, 10, 20],
            clickToSelect: true, // 是否启用点击选中行
            showFullscreen: true, // 显示全屏
            undefinedText: '-', // 当字段为 undefined 显示
            sortOrder: "asc", // 排序方式
            showColumns: true, // 是否显示所有的列
            showRefresh: true, // 是否显示刷新按钮
            showToggle: true, // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
            showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
            exportDataType: "all", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据
            responseHandler: function (res) {
                if (res.code !== 200) {
                    notify("mdi mdi-close", res.message, "danger");
                    return [];
                }
                return res.data;
            },
            // 查询参数
            queryParams: function () {
                return $("form:eq(0)").serializeArray();
            },
            columns: [{
                field: 'example',
                checkbox: true
            }, {
                field: 'no',
                align: 'center',
                title: '序号',
                formatter: function (value, row, index) {
                    //返回序号，注意index是从0开始的，所以要加上1
                    return index + 1;
                }
            }, {
                field: 'key',
                align: 'center',
                title: '客户名称'
            }, {
                field: 'value',
                align: 'center',
                title: '总金额(￥)'
            }],
            onLoadSuccess: function () {      // 数据加载成功时调用的方法

            },
            onLoadError: function () {        // 数据加载失败时调用的方法
                setTimeout(function () {
                    notify("mdi mdi-close", "数据加载失败!", "danger");
                }, 300);
            },
            onCheck: function () {        // 复选框选中事件
                getSelections();
            }
        });
    });

</script>
</body>
</html>
